<template>
  <div>
    <h2>列表数据</h2>
    <my-list :list="list">
      <template #default="{ id }">
        <button @click="del(id)">删除</button>
      </template>
    </my-list>

    <my-list :list="goods">
      <template #default="{ id }">
        <button>编辑</button>
        <button>查看详情</button>
        <button @click="delGoods(id)">删除</button>
      </template>
    </my-list>
  </div>
</template>

<script>
import MyList from './components/MyList.vue'
export default {
  components: { MyList },
  data () {
    return {
      list: [
        { id: 2, name: "吱吱" },
        { id: 4, name: "夜夜" },
        { id: 5, name: "吱吱" },
        { id: 7, name: "夜夜" },
        { id: 8, name: "吱吱" },
      ],
      goods: [
        { id: 2, name: "酸菜鱼" },
        { id: 4, name: "烤鸡翅" },
        { id: 5, name: "炸鸡排" },
        { id: 7, name: "卤猪蹄" },
        { id: 8, name: "粉蒸肉" },
      ]
    }
  },
  methods: {
    del (id) {
      // console.log('做删除', id)
      this.list = this.list.filter(item => item.id != id)
    },
    delGoods (id) {
      this.goods = this.goods.filter(item => item.id != id)
    }
  }
}
</script>

<style>

</style>